<template>
    <view class="content">
        <view class="box">
			<view class="item">
				<view>健康卡</view>
				<view class="item-r" @click="show_2 = true">
					<input type="text" v-model="card" placeholder="请选择" class="inp" disabled>
					<u-icon name="arrow-right" color="#b8b8b8" size="28" class="u-m-l-10"></u-icon>
				</view>
			</view>
			<view class="item">
				<view>预约医院</view>
				<view class="item-r">
					<input type="text" v-model="hospital" placeholder="请输入医院" class="inp">
				</view>
			</view>
			<view class="item">
				<view>预约科室</view>
				<view class="item-r">
					<input type="text" v-model="department" placeholder="请输入科室" class="inp">
				</view>
			</view>
			<view class="item">
				<view>预约医生</view>
				<view class="item-r">
					<input type="text" v-model="doctor" placeholder="请输入医生" class="inp">
				</view>
			</view>
			<view class="item">
				<view>预约时间段</view>
				<view class="item-r" @click="show_1 = true">
					<input type="text" v-model="time" placeholder="请选择" class="inp" disabled>
					<u-icon name="arrow-right" color="#b8b8b8" size="28" class="u-m-l-10"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="btn" @click="doSubmit">确定</view>
		
		<u-calendar v-model="show_1" mode="range" max-date="2050-04-30" @change="change"></u-calendar>
		
		<u-select v-model="show_2" mode="single-column" :list="list" value-name="id" label-name="nickname" 
			@confirm="confirmCard"></u-select>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show_1: false,
				show_2: false,
				list: [],
				card_no: '',
				card: '',
				hospital: '',
				department: '',
				doctor: '',
				time: '',
				begin_date: '',
				end_date: '',
            };
        },
        onLoad() {
            this.getList()
        },
        methods: {
			doSubmit() {
				if (!this.card_no) {
					this.$toast('请选择健康卡')
					return
				}
				if (!this.hospital) {
					this.$toast('请输入医院')
					return
				}
				if (!this.department) {
					this.$toast('请输入科室')
					return
				}
				if (!this.doctor) {
					this.$toast('请输入医生')
					return
				}
				if (!this.time) {
					this.$toast('请选择预约时间段')
					return
				}
				this.$ajax('add_registers', {
				    userToken: this.$getSync('userToken'),
					card_no: this.card_no,
					hospital: this.hospital,
					department: this.department,
					doctor: this.doctor,
					begin_date: this.begin_date,
					end_date: this.end_date,
				}).then(ret => {
					if (ret.status == 0) {
				        this.$toast('提交成功')
						setTimeout(() => {
							this.$backT()
						},500)
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			confirmCard(e) {
				console.log(e)
				this.card = e[0].label
				this.card_no = e[0].value
			},
			
            change(e) {
				console.log(e);
				this.begin_date = e.startDate
				this.end_date = e.endDate
				this.time = e.startDate + ' 至 ' + e.endDate
			},
			
			getList() {
				this.$ajax('get_cards', {
			        userToken: this.$getSync('userToken'),
					type: 1,//0个人中心 1体检预约
			    }).then(ret => {
					if (ret.status == 0) {
			            this.list = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
	.content{
		padding: 18rpx;
	}
	.box{
		padding: 0 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #e6e6e6;
	}
	.item:last-child{
		border-bottom: none;
	}
	.item-r{
		padding-left: 20rpx;
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.inp{
		flex: 1;
		text-align: right;
	}
	.btn{
		font-size: 34rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		background-color: #01b6bc;
		border-radius: 50rpx;
		margin-top: 50rpx;
	}
	
	
	

</style>
